<template>
  <div class="h-full bg-grey">
    <van-nav-bar title="折扣券" class="sticky top-0"></van-nav-bar>
    <div>
      <van-skeleton :row="4" :loading="!ready" class="bg-white m-t-10">
        <van-list
          v-model="listControl.loading"
          :finished="listControl.pages === 0 || listPage.current === listControl.pages"
          finished-text="没有更多了"
          @load="getMoreData()"
          :immediate-check="false"
        >
          <discount-cart :list="list"></discount-cart>
        </van-list>
      </van-skeleton>
      <empty-data
        class="text-center m-t-20"
        v-if="!list.length && ready"
        content="暂无折扣券, 赶快去领券使用吧!"
      ></empty-data>
    </div>
  </div>
</template>

<script>
import DiscountCart from './components/DiscountCart'
export default {
  data () {
    return {
      ready: false,
      list: [],
      listPage: {
        size: 10,
        current: 1
      },
      listControl: {
        pages: null,
        loading: false
      }
    }
  },
  components: {
    DiscountCart
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getDiscountCoupons()
    },
    async getDiscountCoupons () {
      this.listControl.loading = true
      let { page, status } = await this.$api.post('/xf/user/query', {
        size: 10,
        current: this.listPage.current,
        status: [1]
      })
      if (status === 401) return
      page.records = page.records.filter(d => d.status === 1)
      this.list = [...this.list, ...page.records]
      this.listPage.current = page.current
      this.listControl.pages = page.pages
      this.listControl.loading = false
      this.ready = true
    },
    getMoreData () {
      // 分页查询附近商家
      this.listPage.current++
      this.getDiscountCoupons()
    }
  }
}
</script>
